<template>
  <div class="jaguar-view">
    <el-page-header @back="$router.go(-1)" />
    <br />

    <div class="jaguar-control">
      <Button label="清空" icon="pi pi-trash" @click="clearHandler" />
    </div>

    <Card>
      <template #content>
        <DataTable :value="tableData" stripedRows>
          <Column header="时间">
            <template #body="scope">
              {{ new Date(scope.data.timestamp).toLocaleString() }}
            </template>
          </Column>

          <Column header="页面与组件">
            <template #body="scope">
              {{ scope.data.url }} : {{ scope.data.vmName }}
            </template>
          </Column>

          <Column header="错误">
            <template #body="scope">
              <div>
                {{ scope.data.info }}
              </div>
              {{ scope.data.err.stack }}
            </template>
          </Column>
        </DataTable>

        <table-page :page="page" :search="getData" />
      </template>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'ErrorLog',
  data() {
    return {
      tableData: [],
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
    }
  },
  computed: {
    errorLogs() {
      return this.$store.getters.errorLogs
    },
  },
  created() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      let tableData = []
      let start = (this.page.current - 1) * this.page.size
      let end = Math.min(start + this.page.size, this.errorLogs.length)
      for (let i = start; i < end; i++) {
        tableData.push(this.errorLogs[i])
      }

      this.tableData = tableData
      this.page.total = this.errorLogs.length
    },
    clearHandler() {
      this.$store.dispatch('errorLog/clearErrorLog')
      this.tableData = []
      this.page = {
        total: 0,
        current: 1,
        size: 10,
      }
    },
  },
}
</script>
